<template>
  <a-modal
    :maskClosable="false"
    title="查看"
    centered
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-form :form="form" class="view-box">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="角色名称">
        <span>{{ mdl.roleName }}</span>
      </a-form-item>
      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="权限字符"
      >
        <span>{{ mdl.roleKey }}</span>
      </a-form-item> -->
      <!-- <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="显示顺序"
      >
        <span>{{ mdl.roleSort }}</span>
      </a-form-item> -->

      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
        <span>{{ mdl.status === '0' ? '启用' : '禁用' }}</span>
      </a-form-item>
      <a-tabs type="card" v-model="tabsKey">
        <a-tab-pane :key="1" tab="web后台权限">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-tree :show-line="true" :treeData="permissions"> </a-tree>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="小程序权限">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-tree :show-line="true" :treeData="appPermissions"> </a-tree>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-modal>
</template>

<script>
import {
  getUserPermissions,
  getRolePermIdsWithSysType,
  getAppPermissions,
  getAppRolePermIdsWithSysType
} from '@/api/system/system'
import pick from 'lodash.pick'

export default {
  name: 'RoleModal',
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      mdl: {},

      form: this.$form.createForm(this),
      tabsKey: 1,
      treeCheck: false,
      pidSet: [],
      checkedKeys: [],
      halfCheckedKeys: [],
      sysTypeInitialValue: 'OPERATING',
      permissions: [],
      appPermissions: [],
      permissionsArr: [],
      appPermissionsArr: []
    }
  },
  created() {
    this.loadPermissions(this.sysTypeInitialValue)
  },
  methods: {
    view(record) {
      this.loadPermissions(this.sysTypeInitialValue).then(() => {
        if (record.roleId) {
          getRolePermIdsWithSysType(record.roleId, this.sysTypeInitialValue).then(res => {
            const pidSet = new Set(res.map(m => m.menuId))
            this.checkedKeys = this.permissionsArr.filter(item => pidSet.has(item.menuId))
            this.permissions = []
            this.buildtree(this.checkedKeys, this.permissions, 0)
          })

          getAppRolePermIdsWithSysType(record.roleId, this.sysTypeInitialValue).then(res => {
            const pidSet = new Set(res.map(m => m.id))
            const keys = this.appPermissionsArr.filter(item => pidSet.has(item.id))
            this.appPermissions = []
            this.buildtree(keys, this.appPermissions, 0)
          })
        }
        this.mdl = Object.assign({}, record)
        // 如果没有check过，半选节点是拿不到的，只能通过预先设置的pidSet获取
        this.treeCheck = false
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl, 'roleId', 'roleName', 'status', 'roleSort', 'roleKey'))

          // this.form.setFieldsValue(...record)
        })
      })
    },
    loadPermissions(type) {
      var p = new Promise(async (resolve, reject) => {
        this.permissionsArr = await getUserPermissions({ sysType: type })
        this.appPermissionsArr = await getAppPermissions({ sysType: type })
        resolve()
      })
      return p
    },
    buildtree(list, permissions, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          const key = item.menuId || item.id
          var child = {
            key,
            title: item.menuName,
            children: []
          }
          this.buildtree(list, child.children, key)
          permissions.push(child)
        }
      })
    },
    handleCancel() {
      this.tabsKey = 1
      this.visible = false
    }
  }
}
</script>

<style scoped>
.view-box {
  max-height: 600px;
  overflow: auto;
}
.view-box >>> .ant-form-item {
  margin-bottom: 0;
}
</style>
